<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #box{
           background-color: blue;
            
        }
        div{
            color: yellow;
        } */
        .red{
            background-color: red;
        }
.h1{
    background-color: darkslategray !important;
}
        /* 样式冲突
                当我们通过不通的的选择器，
                  选中相同元素，并且为相同的样式设置不同的值 
                  此时发生样式冲突，应用哪个样式由选择器的权重（优先级）决定*/
           
           /* 选择器的权重
                 内联样式           1，0，0，0
                 id选择器           0，1，0，0
                 类和伪类选择器     0，0，1，0
                 元素选择器         0，0，0，1
                 通配选择器        0，0，0，0
                 继承的样式         没有优先级
                 
            比较优先级时，需要将所有的选择器的优先级进行相加计算，
            优先级越高，越先显示 。
                 选择器的累加不会超过最大量级（类选择器不会超过id选择器）
            分组选择器是单独计算
                 */       
                 /* 
                 某一个样式后面添加一个！important，则此时样式获得最高的优先级，甚至超过内联样式
                         注意：在开发中这个要慎用
                  */


    </style>
</head>
<body>
    <div id="box" class="red h1" style="background-color: antiquewhite;"> 
我是一个div
    </div>
    
</body>
</html>